<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=1024, user-scalable=no">

  <title>Your deck.js Presentation</title>

  <!-- Required stylesheet -->
  <link rel="stylesheet" media="screen" href="core/deck.core.css">

  <!-- Extension CSS files go here. Remove or add as needed. -->
  <link rel="stylesheet" media="screen" href="extensions/goto/deck.goto.css">
  <link rel="stylesheet" media="screen" href="extensions/menu/deck.menu.css">
  <link rel="stylesheet" media="screen" href="extensions/navigation/deck.navigation.css">
  <link rel="stylesheet" media="screen" href="extensions/status/deck.status.css">
  <link rel="stylesheet" media="screen" href="extensions/scale/deck.scale.css">

  <!-- Style theme. More available in /themes/style/ or create your own. -->
  <link rel="stylesheet" media="screen" href="themes/style/web-2.0.css">

  <!-- Transition theme. More available in /themes/transition/ or create your own. -->
  <link rel="stylesheet" media="screen" href="themes/transition/horizontal-slide.css">

  <!-- Basic black and white print styles -->
  <link rel="stylesheet" media="print" href="core/print.css">

  <!-- Required Modernizr file -->
  <script src="modernizr.custom.js"></script>
  <style>
    .demoimage{float:right;width:40%;height: 90%;overflow:auto;margin-right: 50px}
  </style>
</head>
<body>
  <div class="deck-container">

    <!-- Begin slides. Just make elements with a class of slide. -->

    <section class="slide">
      <h1>CSS3与HTML5介绍</h1>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h3>课程回顾</h3>
        <h3>实践内容回顾</h3>
        <h3>CSS3</h3>
        <h3>HTML5</h3>
      </div>
    </section>

    <section class="slide">
      <div class="demoimage">
        <div><img src="pic/box_model.png"/></div>
        <div><img src="pic/visual_model.png"/></div>
      </div>

      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>课程回顾:常规流与非常规流</h2>
        <ol>
          <li><h3>常规流(Normal flow)</h3>
            <h4>行盒子(line box) 包含行内元素(inline element)</h4>
            <h4>块盒子 (block box)包含块元素(block element)</h4>
            <h4>行内元素(inline element)与块元素的区别</h4>
            <h4>display:inline与display:block</h4>
          </li>

          <li>
            <h3>Out of flow</h3>
            <h4>绝对定位 position:absolute</h4>
            <h4>特殊的绝对定位：固定定位 position:fixed.</h4>
            <h4>浮动float</h4>
            <h4>脱离常规流，让出原来的位置</h4>
          </li>
          </ol>
        </div>
    </section>
    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>课程回顾:布局(layout)，定位(position)与浮动(float)</h2>
        <ol>
          <li><h3>布局</h3>
            <h4>两栏布局与三栏布局</h4>
            <h4>采用float进行两栏布局</h4>
            <h4>采用绝对定位与相对定位相结合进行两栏布局</h4>
            <h4>采用float的"双飞翼布局"</h4>
          </li>
          <li><h3>绝对定位与相对定位</h3>
            <h4>基准不同:相对定位相对于自身,绝对定位相对于定位为非正常(position:static)的祖先元素</h4>
            <h4>top,left都是相对于基准的左上角。</h4>
            <h4>但left,right只对绝对定位有意义，因为相对定位不能改变长宽，只是移动</h4>
          </li>

          <li>
            <h3>浮动</h3>
            <h4><a href="http://localhost:63343/deck.js-latest/html5workspace/floatlayout.html">
              float基本特性
            </a>
            </h4>
            <h4><a href="http://localhost:63343/deck.js-latest/html5workspace/floatlayout.html">
              float基本特性
            </a>
            </h4>
            <h4>负边距技术,负边距居然可以让float重叠...</h4>
            <h3>清除浮动 clear:left/right/both</h3>
          </li>
        </ol>
      </div>
    </section>
    <section class="slide">
      <div class="demoimage">
        <div><img src="pic/ctrip.PNG"/></div>
      </div>
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>借鉴资料</h2>
        <ol>
          <li><h3>视频资源</h3>
            <h4><a href="http://www.jikexueyuan.com/path/">极客学院知识体系图之HTML5</a></h4>
            <h4><a href="http://pan.baidu.com/s/1kTsxjGb">极客学院视频</a></h4>
          </li>
          <li><h3>其它网站,如:</h3>
            <h4><a href="http://i.waimai.meituan.com/order/confirm">美团网</a></h4>
            <h4><a href="http://m.ctrip.com/html5/?allianceid=7225&ouid=h5&sid=170859&sales=wx">携程旅行网</a></h4>
          </li>
          <li><h3>纸质资料</h3>
            <h4>图书馆任何一本HTML5 || CSS3书(好吧，最好还是老外写的中文翻译书)</h4>
            <h4><a href="http://www.w3school.com.cn/">http://www.w3school.com.cn/</a></h4>
          </li>
          <li><h3>外事不决问谷歌/baidu</h3>
          </li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="demoimage">
        <div><img src="pic/CSS_Modules_and_Snapshots.png"/></div>
      </div>
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>CSS3在CSS2.1的基础上主要添加了以下内容</h2>
        <ol>
          <li>选择器(Selectors)</li>
          <li>变形(Transform)</li>
          <li>过度(Transitions)</li>
          <li>动画(Animations)</li>
          <li>颜色(Color)</li>
          <li>更多...</li>
        </ol>
        <ol>
          <p>留意<a href="www.CSS3Test.com">www.CSS3Test.com</a>，看看各自的浏览器能得多少分？</p>
          <li>例子演示</li>
          <li>CSS3依然不是正式的规范(从草案Draft到推荐/规范(Recommendation)</li>
          <li><a href="http://www.w3.org/TR/css3-roadmap/#css3">CSS3线路图</a></li>
          <li><a href="http://www.w3.org/Style/CSS/current-work.en.html">规范状态</a></li>
        </ol>
      </div>
    </section>


    <section class="slide">
      <div style="float:right;width:40%;height: 90%;overflow: auto;margin-right: 50px">
        <div><img src="exercise/02/景点_列表.jpg"/></div>
        <div><img src="exercise/02/景点_详情.jpg"/></div>
      </div>
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>CSS3 新增的选择器</h2>
        <ol>
          <li>E[foo^="bar"]</li>
          <li>E[foo*="bar"]</li>
          <li>E[foo$="bar"]</li>
          <li>E[:disabled]</li>
          <li>E[:enabled]</li>
          <li>E[:last-child]</li>
          <li>E[:first-child]</li>
          <li>E[:nth-child(n)]</li>
        </li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>HTML5新增的八大内容</h2>
        <ol>
          <li>语义网(Semantics)</li>
          <li>设备访问(Data Access)</li>
          <li>离线和存储(Offline & Storage)</li>
          <li>通信(Connectivity)</li>
          <li>多媒体(Multimedia)</li>
          <li>图形和特效(Graphics & Effects)</li>
          <li>性能和集成(Performance & Integration)</li>
          <li>呈现(CSS3/styling)</li>
        </ol>
        <ol>
          <p>留意<a href="www.html5test.com">www.HTML5test.com</a>，看看各自的浏览器能得多少分？</p>
          <li>例子演示</li>
          <li><a href="http://www.ithome.com/html/ie/109944.htm">HTML5刚刚成为公开的规范啦</a></li>
        </ol>
      </div>
    </section>


    <h3></h3>



    <section class="slide">
      <h1>Thanks, You're dismissed!</h1>
    </section>


    <!-- End slides. -->

    <!-- Begin extension snippets. Add or remove as needed. -->

    <!-- deck.navigation snippet -->
    <div aria-role="navigation">
      <a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
      <a href="#" class="deck-next-link" title="Next">&#8594;</a>
    </div>

    <!-- deck.status snippet -->
    <p class="deck-status" aria-role="status">
      <span class="deck-status-current"></span>
      /
      <span class="deck-status-total"></span>
    </p>

    <!-- deck.goto snippet -->
    <form action="." method="get" class="goto-form">
      <label for="goto-slide">Go to slide:</label>
      <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
      <datalist id="goto-datalist"></datalist>
      <input type="submit" value="Go">
    </form>

    <!-- End extension snippets. -->
  </div>

<!-- Required JS files. -->
<script src="jquery.min.js"></script>
<script src="core/deck.core.js"></script>

<!-- Extension JS files. Add or remove as needed. -->
<script src="extensions/menu/deck.menu.js"></script>
<script src="extensions/goto/deck.goto.js"></script>
<script src="extensions/status/deck.status.js"></script>
<script src="extensions/navigation/deck.navigation.js"></script>
<script src="extensions/scale/deck.scale.js"></script>

<!-- Initialize the deck. You can put this in an external file if desired. -->
<script>
  $(function() {
    $.deck('.slide');
  });
</script>
</body>
</html>
